<!-- 如需左边有伪类的title标签，请在obj对象中传入{titleClass:'left-after-border'} -->
<template>
  <el-dialog :model-value="modelShow" :show-close="false" :close-on-click-modal="false" @close="$emit('cancel')" :class="{
    'model-show-class': props.headerBorder,
    'model-show-footer-class': props.footerBorder,
    'hidden-model-header': !props.showHeader
  }" :fullscreen="props.fullscreen" :center="props.center" :align-center="props.alignCenter"
    :draggable="props.draggable" :width="props.width">
    <template #header v-if="props.showHeader">
      <div class="my-header" :style="props.center ? 'justify-content: center;' : ''">
        <div :class="props.titleClass ? 'left-after-border' : ''"
          :style="[customerHeaderColor, { '--fontSize': props.headerFontSize }]">
          {{ props.title }}
        </div>
        <el-icon @click="cancel" :size="20" color="#9CA3A9" v-show="props.closeable && !props.center">
          <Close />
        </el-icon>
      </div>
    </template>
    <div class="model-slot-content-box">
      <slot> </slot>
      <div class="model-content-box" v-if="props.loading">
        <el-icon class="is-loading" :size="18">
          <Loading />
        </el-icon>
        加载中...
      </div>
    </div>
    <template #footer v-if="props.btnShow">
      <span class="dialog-footer">
        <el-button @click="cancel" :color="props.cancelBgColor" :plain="cancelPlain" :icon="cancelIcon"
          v-show="props.cancelShow" :round="props.round" :size="props.size" :style="customerCancelFontColor">{{
            props.cancelFont }}</el-button>
        <!-- 添加重置按钮 -->
        <el-button @click="reset" v-show="props.resetShow" type="primary" plain>
          {{ props.resetFont }}
        </el-button>
        <el-button @click="confirm" :color="props.confirmBgColor" :plain="confirmPlain" :icon="confirmIcon"
          v-show="props.confirmShow" :round="props.round" :size="props.size" type="primary"
          :style="customerConfirmFontColor" :disabled="props.isActive">
          {{ props.confirmFont }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, computed, toRefs } from 'vue'
import { PiniaStore } from '../../store'
const store = PiniaStore()
interface PropsType {
  //   是否显示，true为是
  modelShow: boolean
  //   宽度占比,默认30%
  width: number | string
  // 是否启用header-border排版
  headerBorder?: boolean
  // 是否启用footer-border排版
  footerBorder?: boolean
  // 是否启用另一种header排版
  titleClass?: boolean
  // header标题的颜色自定义
  headerFontColor?: string
  // header标题的文字大小自定义,单位为px
  headerFontSize?: string
  // 标题名称
  title?: string
  // 内容居中，按钮居中,当启用该功能，默认关闭按钮是隐藏的
  center?: boolean
  // model容器居中布局
  alignCenter?: boolean
  // model容器是否可按住顶部拖拽
  draggable?: boolean
  // model容器是否全屏呈现？启用该属性后，将让拖拽等事件失效
  fullscreen?: boolean
  // 是否呈现关闭按钮
  closeable?: boolean
  // 是否需要底部按钮组
  btnShow?: boolean
  // cancel 按钮文字
  cancelFont?: string
  // cancel 按钮文字颜色，一般不建议使用,如需更换颜色，建议直接使用el-button自带主题
  cancelFontColor?: string
  // cancel 按钮单独控制显示隐藏
  cancelShow?: boolean
  // icon数值，如需要，请参考el-icon定义值，正确传入数值
  cancelIcon?: string
  // cancel 自定义的颜色，详情查看el-button文档
  cancelBgColor?: string
  // cancel 是否plain属性，详情查看el-button文档
  cancelPlain?: boolean
  // confirm按钮文字
  confirmFont?: string
  // confirm 按钮文字颜色，一般不建议使用,如需更换颜色，建议直接使用el-button自带主题
  confirmFontColor?: string
  // confirm 按钮单独控制显示隐藏
  confirmShow?: boolean
  // icon数值，如需要，请参考el-icon定义值，正确传入数值
  confirmIcon?: string
  // confirm 自定义的颜色，详情查看el-button文档
  confirmBgColor?: string
  // confirm 是否plain属性，详情查看el-button文档
  confirmPlain?: boolean
  resetShow?: boolean
  resetFont?: string
  // round 按钮是否原型按钮，该属性为el-button自带属性
  round?: boolean
  // size 按钮自定义大小，该属性为el-button自带属性，详细值请参考element-plus/button文档,此处默认为large,可选值large、default、small
  size?: string
  // 内容区域当内容没有回来之前，是否需要loading 覆盖，
  loading?: boolean
  // 是否呈现表头
  showHeader?: boolean
  isActive?: boolean
}
const props = withDefaults(defineProps<PropsType>(), {
  modelShow: false,
  width: 30,
  headerBorder: true,
  footerBorder: false,
  titleClass: false,
  headerFontColor: '',
  headerFontSize: '16px',
  title: '',
  center: false,
  alignCenter: false,
  draggable: true,
  fullscreen: false,
  closeable: true,
  btnShow: true,
  cancelFont: '取 消',
  cancelFontColor: '',
  cancelShow: true,
  cancelIcon: '',
  confirmFont: '确 定',
  confirmFontColor: '',
  resetFont: '重 置',
  resetShow: false,
  confirmShow: true,
  confirmIcon: '',
  round: false,
  size: '',
  loading: false,
  showHeader: true,
  isActive: false
})
interface EmitType {
  (e: 'cancel'): void
  (e: 'confirm'): void
  (e: 'reset'): void
}
const emit = defineEmits<EmitType>()
const customerHeaderColor = computed(() => {
  return 'color:' + props.headerFontColor + ';font-size:' + props.headerFontSize
})
const customerCancelFontColor = computed(() => {
  return 'color:' + props.cancelFontColor
})
const customerConfirmFontColor = computed(() => {
  return 'color:' + props.confirmFontColor
})
const { modelShow } = toRefs(props)
// 父元素回调关闭按钮的方法
const cancel = () => {
  emit('cancel')
}
// 父元素回调确认按钮的方法
const confirm = () => {
  emit('confirm')
}
const reset = () => {
  emit('reset')
}
</script>
<style lang="scss" scoped>
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-weight: bold;
  color: #333333;
}

.left-after-border {
  padding-left: 15px;
  position: relative;
  color: var(--el-text-color-primary);
  font-size: var(--el-dialog-title-font-size);

  &::after {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 4px;
    height: var(--fontSize);
    border-radius: 10px;
    background-color: var(--el-color-primary);
  }
}

.model-slot-content-box {
  position: relative;
}

.model-content-box {
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.9),
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 1));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
</style>
<style lang="scss">
.el-dialog__header {
  margin-right: 0;
  color: var(--el-text-color-regular);
  padding: 15px 20px;
}

.el-dialog__footer {
  border-top: var(--el-border);
  padding: 15px;
}

// dialog
.model-show-class {
  .el-dialog__header {
    border-bottom: var(--el-border);
  }
}

.el-dialog__header {
  .el-icon {
    cursor: pointer;

    &:hover {
      color: var(--el-color-primary);
      transform: scale(1.2);
    }
  }
}

.hidden-model-header {
  .el-dialog__header {
    padding: 0;
    border: none;
  }
}

.recordBox .el-dialog__body {
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
}
</style>
